<style scoped>
::v-deep .el-form-item__content{
  flex-wrap: nowrap;
}
</style>
<template>
  <div class="sm:w-120 sm:h-auto sm:mt-12 w-full h-full mx-auto shadow-xl">
    <el-steps :space="200" finish-status="success" :active="activeStep" simple>
      <el-step title="修改密码" :icon="Edit" />
      <el-step title="修改成功" :icon="SuccessFilled" />
    </el-steps>
    <div class="p-4">
      <template v-if="activeStep === 0">
        <el-form
          ref="changeForm"
          :model="postdata"
          label-width="5rem"
          :rules="rules"
          status-icon
        >
          <el-form-item label="原密码" prop="oldpwd">
            <el-input v-model="postdata.oldpwd" type="password"  />
          </el-form-item>
          <el-form-item label="新密码" prop="newpwd">
            <el-input v-model="postdata.newpwd" type="password"  />
          </el-form-item>
          <el-form-item label="确认密码" prop="makesure">
            <el-input v-model="postdata.makesure" type="password"  />
          </el-form-item>
          <el-form-item>
            <el-button 
              type="warning" 
              @click="router.back()"
              plain
              class=" w-40 ml-auto"
            ><el-icon class=" mr-2"><Back /></el-icon>取消</el-button>
            <el-button 
              type="primary" 
              @click="submitForm"
              :disabled="activeStep != 0"
              plain
              class=" w-40 ml-4"
            >确认修改</el-button>
          </el-form-item>
        </el-form>
      </template>

      <template v-else-if="activeStep === 1">
        <div class="flex flex-col items-center py-5">
          <svg t="1655460695182" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3509" width="48" height="48"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#52C41A" p-id="3510"></path><path d="M178.614857 557.860571a42.496 42.496 0 0 1 60.123429-60.050285l85.942857 87.625143a42.496 42.496 0 0 1-60.050286 60.123428L178.614857 557.860571z m561.005714-250.148571a42.496 42.496 0 1 1 65.097143 54.637714L394.459429 725.577143a42.496 42.496 0 0 1-65.097143-54.637714l410.112-363.373715z" fill="#FFFFFF" p-id="3511"></path></svg>
          <p class="text-lg font-bold py-2">修改成功,即将<span class=" text-red-400">重新登录</span></p>
          <el-button link @click="logOut" type="primary" class="m-0">
            {{countdown}}S后跳转到登录页面(点击<span class=" font-bold">立即跳转</span>)
          </el-button>
        </div>
      </template>
    </div>
  </div>
</template>

<script setup>
import { Edit,SuccessFilled } from '@element-plus/icons-vue'
import { computed, reactive, ref } from 'vue'
import { regs } from '@/utils/funcs'
import { 
  doChangePwd
} from 'api'
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { Back } from '@element-plus/icons-vue'

const store = useStore()
const router = useRouter()

const changeForm = ref()
const postdata = reactive({
  oldpwd:'',
  newpwd:'',
  makesure:''
})

const passvalidator = ({},value,callback) => {
  if(!regs.pass.test(value)) 
    callback(new Error('密码必须是数字和字母组合，且长度为6~12位'))
  const { newpwd,makesure,oldpwd } = postdata
  if(newpwd !== makesure && newpwd && makesure)
    callback(new Error('两次密码不一致'))
  if(oldpwd === newpwd)
    callback(new Error('新旧密码相同'))
  callback()
}

const rules = ({
  oldpwd:  [{required:true, message:'请填写原密码', trigger: 'blur' }],
  newpwd:  [{required:true, validator: passvalidator, trigger: 'blur' }],
  makesure: [{required:true, validator: passvalidator, trigger: 'blur' }]
})


let code_inter = null
let times = 10
const countdown = ref(0)
const activeStep = ref(0)

const logOut = async () => {
  clearInterval(code_inter)
  await store.dispatch('logOut')
  router.push({name:'login'})
}

const submitForm = async () =>{
  await changeForm.value.validate()
  times -= 1
  if(times <= 0){
    ElMessageBox.alert('您已经尝试很多次了', '提示')
    return
  }
  await doChangePwd(postdata)
  activeStep.value = 1
  countdown.value = 5
  code_inter = setInterval(() => {
    countdown.value -= 1
    if(countdown.value <= 0){
      countdown.value = 0
      clearInterval(code_inter)
      logOut()
    }
  },1000)

}
</script>